<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="type" label="类别"></el-table-column>
      <el-table-column prop="beforetype" label="类别前缀"></el-table-column>
      <el-table-column prop="price" label="价格"></el-table-column>
      <el-table-column prop="sort" label="顺序权重"></el-table-column>
      <el-table-column prop="start" label="启用">
        <template slot-scope="scope" style="display:flex;align-items: center;">
          <img
            src="../../assets/img/dui.png"
            v-if="scope.row.start"
            style="width:14px;height:14px;margin-right:6px;"
            alt
          />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <el-button type="text" size="mini">编辑</el-button>
        <el-button type="text" size="mini">图册</el-button>
        <el-button type="text" size="mini" @click="setsort">排序</el-button>
        <el-button type="text" size="mini">启用</el-button>
        <el-button type="text" size="mini" @click="del">删除</el-button>
      </el-table-column>
    </el-table>
    <el-dialog title="排序" :visible.sync="sortpopup" width="40%">
      <el-form
        ref="sortformInfo"
        :model="sortformInfo"
        class="demo-form-inline"
        label-width="100px"
        :rules="rules"
      >
        <el-form-item label="类别" prop="type" label-width="100px">
          <span>{{sortformInfo.type}}</span>
        </el-form-item>
        <el-form-item label="顺序权重" prop="sort" label-width="100px">
          <el-input v-model="sortformInfo.sort"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="say" label-width="100px">
          <span>{{sortformInfo.say}}</span>
        </el-form-item>
        <el-form-item style="text-align: right;">
          <el-button @click="sortpopup=false">取消</el-button>
          <el-button type="primary" @click="submitFormsort('sortformInfo')">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      sortformInfo:{
          type:"半开放格子桌",
          sort:"1",
          say:"按照权重由小到大在小程序显示顺序"
      },
      sortpopup:false,
      tableData: [
        {
          type: "预定座位",
          beforetype: "A",
          price: "200元",
          start: true,
          sort: "1"
        },
        {
          type: "预定座位",
          beforetype: "A",
          price: "200元",
          start: true,
          sort: "2"
        },
        {
          type: "预定座位",
          beforetype: "A",
          price: "200元",
          start: true,
          sort: "3"
        },
        {
          type: "预定座位",
          beforetype: "A",
          price: "200元",
          start: true,
          sort: "4"
        }
      ]
    };
  },
  methods: {
    del() {
      this.$confirm("确定删除此条数据吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    setsort(){
        this.sortpopup = true
    },
    submitFormsort(){
        this.sortpopup = false
    }
  }
};
</script>
<style>
.el-table td,
.el-table th {
  padding-left: 20px;
}
</style>
